<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品信息查询</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css"
	href="static/paginationjs-master-2.1.0/dist/pagination.css" />

</head>
<body>
	<form id="form1" class="form-horizontal" action="LoginAction"
		method="post">
		<div class="form-group" style="margin-top: 100px; position: relative">
			<label class="col-sm-2 control-label col-sm-offset-3">商品名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="txtUserName"
					name="goods_name" placeholder="请输入商品名">
			</div>
			<label class="col-sm-2 control-label" id="goodsMsg"></label>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-5 col-sm-2">
				<button type="button" class="btn btn-default"
					onclick="doAjaxQuery()">查询</button>
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-1 col-sm-9">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>排序</th>
							<th>商品编号</th>
							<th>商品名</th>
							<th>商品价格</th>
							<th>商品状态</th>
							<th>商品种类</th>
							<th>商品图例</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7"
				style="position: absolute; left: 0; bottom: 5%">
				<div class="inner-left preview" id="querypager"></div>
			</div>
		</div>
		<!-- /example -->
	</form>
	<!--引入jquery-->
<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript"
	src="static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
<script type="text/javascript">
	// 使用jquery进行ajax处理
	function doAjaxQuery(){
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "post", // 请求类型
			url : "AjaxProjectsMessageQueryAction", // 请求的url
			data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作

				// 解析json数据
				console.info(data);

				// 将ajax查询的结果进行分页处理
				doPaging(data, 5);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */

			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}

	// 分页处理
	function doPaging(data, pagesize) {

		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize = 5; // 默认页面大小为5条记录
		}
		console.info("pagesize:" + pagesize);
		// 获取显示分页控件的div
		$('#querypager').pagination(
					{
							dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
							pageSize : pagesize,// 每页显示的记录条数
							showGoInput : true, // 是否显示页码输入框按钮
							showGoButton : true,//是否显示goin按钮
							callback : function(data, pagination) {
								console.info(pagination);
								// 分页处理
								// 解析拼写的html内容
								var strHtml = "";
								$.each(data,function(index, eachVal) {
													strHtml += "<tr>";

													strHtml += "<th scope='row'>";
													strHtml += (index + 1);
													strHtml += "</th>";
													strHtml += "<td class='count";
												    strHtml +=(index+1);
													strHtml +="'>";
													strHtml += eachVal.goods_id;
													strHtml += "</td>";

													strHtml += "<td class='name";
													strHtml +=(index+1);
													strHtml +="'>";
													strHtml += eachVal.goods_name;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.goods_price;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.goods_status;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.goods_kind;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += "<img src='";
					                                strHtml+=eachVal.goods_img;					
					                                 strHtml+="' width='30px' height='30px'/>";
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml +=" <input id='delaction' onclick='ale";
													strHtml +=(index+1);
													strHtml +="()' type='button' value='下架'  class='delete'/>";
													strHtml += "</td>";

													strHtml += "</tr>";

													//strHtml+="</tr>";
												});

								// 把解析的html内容，使用dom操作赋值到表格中
								$("#displaytbody").html(strHtml);
							}
               })
	}

	//进行删除操作，用AJAX进行操作
function del(a,b){
			$.ajax({
				type : "post",//请求类型
				url : " AjaxProjectsMessageDeleteAction ",//请求的url
				data : "goods_id="+a ,//= $managername,//发送的数据 
				dataType:"text",
				success : function() {//执行成功后调用的回调函数
					doAjaxQuery();
					alert("商品"+b+"下架成功");
				    
				},
				error : function() {//失败后调用的函数
					alert("下架失败");
				}
			});
		}
		function ale1(){
			var $managercount=$(".count1").text();
			var $managername = $(".name1").text();
			del($managercount,$managername);
		}
		function ale2(){
			var $managercount=$(".count2").text();
			var $managername = $(".name2").text();
			del($managercount,$managername);
		}
		function ale3(){
			var $managercount=$(".count3").text();
			var $managername = $(".name3").text();
			del($managercount,$managername);
		}
		function ale4() {
			var $managercount=$(".count4").text();
			var $managername = $(".name4").text();
			del($managercount,$managername);
		}
		function ale5() {
			var $managercount=$(".count5").text();
			var $managername = $(".name5").text();
			del($managercount,$managername);
		}
</script>
</body>
</html>
